<template>
	<view class="home">
		<request-loading :show='show'></request-loading>
		<!-- 头部 -->
		<view class="top">
			<view class="top-1">
				<image class="im1" src="../../static/home/icon_home_hongbao.png" mode=""></image>
				<navigator animation-type="zoom-fade-out" animation-duration="300" url="/pages/HM-search/HM-search">
					<view class="inp-1">
						<image class="im-3" src="../../static/home/icon_sousuokuang.png" mode=""></image>
						<input :disabled="true" class="inp-2" type="text" value="" placeholder="搜索" />
					</view>
				</navigator>

				<image class="im2" src="../../static/home/icon_home_lianxiankuang.png" mode=""></image>
			</view>
			<view class="top-2">
				<view class="wz-1">蜗牛金融</view>
				<view class="wz-2">蜗牛官方合作企业</view>
			</view>
			<view class="top-3">
				<view class="top-3-1">
					<view class="wz-1">
						贷款精选
					</view>
					<view class="wz-2">
						极速贷款
					</view>
				</view>
				<view class="top-3-2">
					<view class="wz-1">
						200,000
					</view>
					<view class="wz-2">
						最高可借(元)
					</view>
					<view class="wz-2">

					</view>
				</view>
				<view class="top-3-2">
					<view class="wz-1">
						0.035%
					</view>
					<view class="wz-2">
						日利率低至
					</view>
					<view class="wz-2">

					</view>
				</view>
				<view class="top-3-2">
					<button class="button" type="default">立即申请</button>
				</view>
			</view>
		</view>
		<!-- 导航 -->
		<view class="nav">
			<navigator animation-type="zoom-fade-out" animation-duration="300" url="/pages/fund_Bone/fund_Bone">
				<view class="nav-1">
					<image class="im-1" src="../../static/home/ico-nav-1.png" mode=""></image>
					<view class="wz-1">热门基金</view>
				</view>
			</navigator>

			<navigator open-type="switchTab" animation-type="zoom-fade-out" animation-duration="300"
				url="/pages/insurance/insurance">
				<view class="nav-1">
					<image class="im-1" src="../../static/home/ico-nav-2.png" mode=""></image>
					<view class="wz-1">保险</view>
				</view>
			</navigator>

			<view class="nav-1">
				<image class="im-1" src="../../static/home/ico-nav-3.png" mode=""></image>
				<view class="wz-1">邀请好友</view>
			</view>
			<view class="nav-1">
				<image class="im-1" src="../../static/home/ico-nav-4.png" mode=""></image>
				<view class="wz-1">体验理财</view>
			</view>
		</view>
		<!-- 广告 -->
		<view class="slogan">
			<image class="im-1" src="../../static/image/img_shouye_bannerf@3x.png" mode=""></image>
		</view>
		<!-- 理财 -->
		<view class="money">
			<view class="money-1">
				理财最前沿
			</view>
			<swiper next-margin="150rpx">
				<swiper-item class="money-2">
					<view class="im-1">
						<image class="im-1" src="../../static/home/img_bg_licaizuiqianyan@3x.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item class="money-3">
					<view class="im-1">
						<image class="im-1" src="../../static/home/img_bg_licaizuiqianyan@3x.png" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 保险 -->
		<view class="insurance">
			<view class="insurance-wz">
				<text>精选保险</text>
			</view>
			<view class="insurance-1">
				<view class="insurance-1-1">
					<view class="wz-1">
						<text>终身防癌医疗险</text>
					</view>
					<view class="wz-2">
						<text>三高人群可投保</text>
					</view>
					<view class="wz-3">
						<text>7.24</text><text class="xwz">元起</text>
					</view>
					<view class="wz-4">
						<button class="wz-5" type="default">0元领取</button>
					</view>
				</view>
				<view class="insurance-1-1">
					<view class="wz-1">
						<text>少儿综合意外险</text>
					</view>
					<view class="wz-2">
						<text>日常磕碰 监护人责任</text>
					</view>
					<view class="wz-3">
						<text>7.24</text><text class="xwz">元起</text>
					</view>
					<view class="wz-4">
						<button class="wz-5" type="default">开启保障</button>
					</view>
				</view>
			</view>

		</view>
		<!-- 新手帮助 -->
		<view class="noob">
			<view class="noob-wz">
				<text>新手帮助</text>
			</view>
			<view class="noob-1">
				<image class="im-1" src="../../static/home/home-xs-1.png" mode=""></image>
				<view class="wz-1">
					<text>新人必看 借款指南</text> <br>
					<text class="wz-2">最高2000000元，可灵活分期</text>
				</view>
			</view>
			<view class="noob-1">
				<image class="im-1" src="../../static/home/home-xs-1.png" mode=""></image>
				<view class="wz-1">
					<text>一分钟读懂理财保险</text><br>
					<text class="wz-2">财富增值与风险保障兼得</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";

	export default {
		mounted() {
			this.s()
		},
		data() {
			return {
			// 动画控制
			show:true

			}
		},
		methods: {
			s(){
				setTimeout(()=>{
				this.show=false
				},500)
			}
		}
	}
</script>

<style scoped lang="scss">
	.home {
		width: 750rpx;
		box-sizing: border-box;

		/* 头部 */
		.top {
			background: url('../../static/image/img_shouye_top.png') no-repeat;
			background-size: cover;
			width: 750rpx;
			height: 600rpx;
			padding: 0rpx 40rpx;
			overflow: hidden;

			.top-1 {

				width: 100%;
				height: 70rpx;
				display: flex;

				.im1 {
					width: 80rpx;
					height: 70rpx;
				}

				.inp-1 {
					width: 500rpx;
					height: 100%;
					margin-left: 25rpx;
					border-radius: 100rpx;
					display: flex;
					background-color: #f7f7f7;

					.im-3 {
						margin-left: 15rpx;
						margin-top: 10rpx;
						width: 50rpx;
						height: 50rpx;
					}

					.inp-2 {
						margin-left: 15rpx;
						width: 400rpx;
						height: 100%;
						font-size: 30rpx;
					}
				}

				.im2 {
					margin-left: 30rpx;
					width: 70rpx;
					height: 70rpx;
				}
			}

			.top-2 {
				margin-top: 40rpx;
				width: 100%;
				height: 140rpx;

				.wz-1 {
					font-size: 50rpx;
					color: #ffffff;
				}

				.wz-2 {
					margin-top: 20rpx;
					font-size: 30rpx;
					color: #ffffff;
				}
			}

			.top-3 {
				padding: 24rpx;
				margin-top: 30rpx;
				width: 100%;
				height: 300rpx;
				border-radius: 25rpx;
				background-color: #ffffff;
				display: flex;
				flex-wrap: wrap;

				.top-3-1 {
					width: 100%;
					height: 30%;
					display: flex;

					.wz-1 {
						font-size: 40rpx;
						width: 175rpx;
						font-weight: 600;
					}

					.wz-2 {
						margin-top: 10rpx;
						width: 120rpx;
						height: 40rpx;
						font-size: 26rpx;
						line-height: 40rpx;
						border-radius: 15rpx;
						text-align: center;
						color: #fff7f6;
						background-image: linear-gradient(to left, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
					}
				}

				.top-3-2 {
					width: 33%;
					height: 70%;

					.wz-1 {
						width: 100%;
						height: 70%;
						font-size: 45rpx;
						font-weight: 800;
						color: #e74d45;
						line-height: 140rpx;
					}

					.wz-2 {
						width: 100%;
						height: 30%;
						color: #bcc2cc;

					}

					.button {
						margin-top: 50rpx;
						width: 170rpx;
						font-size: 24rpx;
						height: 50rpx;
						line-height: 50rpx;
						color: #ffffff;
						background-color: #3a6af6;
					}
				}
			}
		}

		/* 导航 */
		.nav {

			width: 100%;
			height: 150rpx;
			padding: 0rpx 40rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.nav-1 {
				width: 110rpx;
				height: 100%;

				.im-1 {
					width: 100%;
					height: 70%;
				}

				.wz-1 {
					text-align: center;
					font-size: 25rpx;
					font-weight: 600;
				}
			}
		}

		/* 广告 */
		.slogan {
			margin-top: 48rpx;
			width: 100%;
			height: 200rpx;
			padding: 0rpx 40rpx;
			border-radius: 25rpx;

			.im-1 {
				width: 100%;
				height: 100%;
			}
		}

		/* 理财 */
		.money {
			margin-top: 48rpx;
			padding: 0rpx 40rpx;
			width: 100%;
			width: 100%;
			height: 350rpx;

			.money-1 {
				width: 100%;
				height: 20%;
				font-size: 35rpx;
				font-weight: 800;
				line-height: 70rpx;

			}

			.money-2 {
				width: 100%;
				height: 100%;
				border-radius: 25rpx;

				.im-1 {
					width: 100%;
					height: 100%;
				}
			}

			.money-3 {
				margin-left: 20rpx;
				width: 100%;
				height: 80%;
				border-radius: 25rpx;

				.im-1 {
					width: 100%;
					height: 100%;
				}
			}
		}

		/* 保险 */
		.insurance {
			width: 100%;
			height: 400rpx;

			.insurance-wz {
				width: 100%;
				height: 70rpx;
				padding: 0rpx 40rpx;
				font-size: 35rpx;
				font-weight: 800;
				line-height: 70rpx;
			}

			.insurance-1 {
				width: 100%;
				height: 100%;
				background: url(../../static/home/home-insurance.png);
				background-size: 100% 100%;
				padding: 40rpx;
				display: flex;

				.insurance-1-1 {
					width: 50%;
					height: 100%;

					.wz-1 {
						width: 100%;
						height: 25%;
						text-align: center;
						line-height: 70rpx;
						font-size: 35rpx;
						font-weight: 700;
					}

					.wz-2 {
						width: 100%;
						height: 15%;
						text-align: center;
						color: #efab6b;
						line-height: 50rpx;
						font-size: 25rpx;
					}

					.wz-3 {
						width: 100%;
						height: 30%;
						text-align: center;
						color: #efab6b;
						line-height: 80rpx;
						font-size: 48rpx;
						font-weight: 700;

						.xwz {
							font-size: 20rpx;

						}
					}

					.wz-4 {
						width: 50%;
						height: 20%;
						margin-left: 25%;

						.wz-5 {
							background-color: #efab6b;
							color: #ffffff;
							font-size: 24rpx;
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.noob {
			margin-top: 40rpx;
			width: 100%;
			height: 200rpx;
			padding: 0rpx 40rpx;
			display: flex;
			flex-wrap: wrap;


			.noob-wz {

				width: 100%;
				height: 70rpx;
				font-size: 35rpx;
				font-weight: 800;
				line-height: 70rpx;
			}

			.noob-1 {
				position: relative;
				width: 50%;
				height: 200rpx;

				.im-1 {
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: -1;
				}

				.wz-1 {
					margin-top: 60rpx;
					margin-left: 30rpx;
					width: 100%;
					font-size: 30rpx;
					font-weight: 700;
					color: #fffcf3;
				}

				.wz-2 {
					font-size: 20rpx;
				}
			}

		}
	}
</style>
